<template>
  <div class="modify-dialog">
    <!-- <el-button size="small" type="primary" @click="showDialog()">
			新建材料
		</el-button> -->
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible" width="650px">
      <Form v-bind="formOpts" v-on="formEvent">
        <template #formBtn>
          <el-form-item label="材料缩略图（可多选）" style="width: 100%">
            <el-upload
              multiple
              class="uploader-wrap"
              :headers="headers"
              :action="`${$apiHost}/shared/upload`"
              :on-success="onSuccess"
              :show-file-list="false"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <template #tip>
                <div class="img-wrap">
                  <el-image
                    v-for="(item, index) in preImgs"
                    :key="index + item"
                    :src="item"
                    :preview-src-list="preImgs"
                    class="img-item"
                    fit="cover"
                  >
                  </el-image>
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
          </div>
        </template>
      </Form>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
export default {
  mixins: [modifyMixins],
  data() {
    return {
      productImgs: [],
      inline: true,
      labelPosition: "right",
      form: {
        productCode: {
          tag: "el-input",
          label: "材料编码",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料编码",
          },
        },
        productName: {
          tag: "el-input",
          label: "配件名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入配件名称",
          },
        },
        norms: {
          tag: "el-input",
          label: "规格",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入规格",
          },
        },
        unit: {
          tag: "el-input",
          label: "单位",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入单位",
          },
        },
        colour: {
          tag: "el-input",
          label: "色号",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入色号",
          },
        },
        directoryIds: {
          tag: "el-select",
          label: "套件",
          value: "",
          items: this.getDirectoryItem(),
          props: {
            clearable: true,
            filterable: true,
            multiple: true,
            collapseTags: true,
          },
        },
        price: {
          tag: "el-input-number",
          label: "单价",
          value: "",
          props: {
            min: 0,
            precision: 2,
            clearable: true,
            placeholder: "请输入单价",
          },
        },
        dosage: {
          tag: "el-input-number",
          label: "套件数量",
          value: "",
          props: {
            // min: 0,
            clearable: true,
            placeholder: "请输入套件数量",
          },
        },
        limit: {
          tag: "el-input-number",
          label: "库存告警阀值",
          value: "",
          props: {
            min: 0,
            clearable: true,
            placeholder: "请输入阀值",
          },
        },
        description: {
          tag: "el-input",
          label: "材料说明",
          value: "",
          props: {
            style: {
              width: "187px",
            },
            rows: 3,
            type: "textarea",
            clearable: true,
            placeholder: "请输入材料说明",
          },
        },
      },
    };
  },
  computed: {
    title() {
      return this.modify === "add" ? "新增材料" : "编辑材料";
    },
    preImgs() {
      return this.productImgs.map((e) => `${this.$imgHost}${e}`);
    },
    headers() {
      const token = this.token || this.$quinn.getStorage("token");
      return {
        token,
      };
    },
  },
  methods: {
    onSubmit(form) {
      const { modify, row, productImgs } = this;
      if (modify === "add")
        this.$api
          .addMaterial({
            ...form,
            materialStatus: 1,
            productImgs,
          })
          .then(this.submitDoneMsg);
      else if (modify === "edit") {
        this.$api
          .patchMaterial({ ...form, productImgs, id: row.id })
          .then(this.submitDoneMsg);
      }
    },
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.modify = modify || "add";
      for (const key in this.form) {
        let defValue = "";
        if (Array.isArray(this.form[key].value)) defValue = [];
        if (Object.hasOwnProperty.call(row, key))
          this.form[key].value = row[key] || defValue;
        else this.form[key].value = defValue;
      }
      this.formKey = this.$quinn.guid();
      this.form.directoryIds.value = (row.directorys || []).map((e) => e.id);
      this.productImgs = row.productImgs || [];
      // this.form.directoryIds.props.disabled = modify == "edit";
    },
    onSuccess(res) {
      const { productImgs = [] } = this;
      if (res.code == 0 && res.result) {
        productImgs.push(res.result);
        this.productImgs = productImgs;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
